/**
 **搜索页面**
 */
//搜索
var Search = {
    props:["isShow"],
    template: `<div class="search">
                 <div class="search-input" @click="searchPage">
                   <img class="searchImg" src="./images/search.png" alt="搜索">
                   <input v-show="isShow==0" disabled type="text" placeholder="搜索你感兴趣的内容">
                   <input v-show="isShow==1" autofocus type="text" placeholder="搜索你感兴趣的内容">
                 </div>
                 <div class="search-box">
                     <div v-show="isShow==0" class="notice" @click="goNoyic">
                       <img src="./images/notice.png" alt="">
                       <span class="noticeNum">{{noticeNum}}</span>
                     </div>
                     <div v-show="isShow==1" class="cancelBtn"><span>取消</span></div>
                 </div>
              </div>`,
    data() {
        return {
            isappear:0,
            noticeNum: 2,
        }
    },
    watch:{
        isShow:function (n) {
            this.isappear = n;
        },
    },
    methods: {
        searchPage: function () {
            var name = this.$router.history.current.name;
            if(name=="nearbylink" || name == "findlink" || name=="attentionlink"){
                this.$router.push(
                    {
                        path:'/index/search',
                        query:{
                            isappear:1,
                        }
                    });
            }

        },
        goNoyic:function () {
            var name = this.$router.history.current.name;
            if(name=="nearbylink" || name == "findlink" || name=="attentionlink"){
                this.$router.push("/notification");
            }

        }
    },

}

//搜索详情
var SearchPage = {
    template: `<div>
                  <search :is-show="isShow"></search>
                  <p class="searchTitle">查找可能感兴趣的会员</p>
                    <div class="search-com">
                       <ul class="attention-search-box">
                          <li class="attention-list" v-for="item in searchArr">
                             <div class="list-img">
                               <img :src="item.img" alt="">
                             </div>
                              <div class="obj-num">
                                <p class="attentionObj">{{item.attentionObj}}</p>
                                <p class="attentionNum">{{item.attentionNum}}关注</p>
                              </div>
                              <button v-if="item.isattention" class="search-list-btn" @click="addAttention(item)">+关注</button>
                              <button v-else class="search-list-btn" @click="addAttention(item)">已关注</button>
                          </li>
                       </ul>
                       
                    </div>
                     <!--未关注展示-->
                   <div v-if="searchArr<=0" class="not">
                      <div class="notImg">
                         <img src="./images/not.png" alt="">
                      </div>
                      <p>快去搜索！！！</p>
                   </div>
               </div>`,
    data() {
        return {
            isShow:0,
            isDisabled:false,
            searchArr: [
                {
                    img: "./images/flow1.png",
                    attentionObj: '策划',
                    attentionNum: 123,
                    isattention: true,
                },
                {
                    img: "./images/flow1.png",
                    attentionObj: '策划',
                    attentionNum: 123,
                    isattention: false,
                }
            ]
        }
    },
    components: {
        'search': Search
    },
    created(){
        this.isShow = this.$route.query.isappear;
    },
    methods: {
        addAttention: function (data) {
            if (data.isattention) {
                data.isattention = !data.isattention
            } else {
                data.isattention = !data.isattention
            }
        }
    }
}
